<template>
  <div class="app-container home">
    <!-- 顶部布局 -->
    <div class="top-layout">
      <HomeTask />
    </div>
    <div class="main-layout">
      <!-- 左侧布局 营销业务统计-->
      <div class="left-layout layout">
        <Title title="营销业务统计" />
        <div class="filtr-selects">
          <el-select
            v-model="marketingBusiness.salesDepartment"
            placeholder="营业部"
            @change="handleMarketingBusinessChange"
          >
            <el-option
              v-for="(item, index) in salesDepartmentList"
              :label="item.label"
              :key="index"
              :value="item.value"
            ></el-option>
          </el-select>
          <el-select
            v-model="marketingBusiness.baoQu"
            placeholder="包区"
            @change="handlebaoqu"
          >
            <el-option
              v-for="(item, index) in baoQuListL"
              :label="item.label"
              :key="index"
              :value="item.value"
            ></el-option>
          </el-select>
          <!-- <el-select v-model="marketingBusiness.community" placeholder="小区" >
            <el-option v-for="item in communityList" :label="item.label" :value="item.value"></el-option>
          </el-select> -->
          <el-select v-model="marketingBusiness.time" placeholder="时间" @change="handleMarketingTime">
            <el-option
              v-for="(item, index) in timeList"
              :key="index"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </div>
        <div class="bar-svg">
          <div
            class="bar-svg-item"
            v-for="(item, index) in marketingBusinessList"
            :key="index"
          >
            <div class="bar-svg-item-title">{{ item.title }}</div>
            <div class="bar-svg-item-num">
              {{ item.num }}<span style="font-size: 18px">个</span>
            </div>
            <BarSvg :svgColor="item.color" />
          </div>
        </div>
      </div>
      <!-- 中间布局 -->
      <div class="center-layout">
        <!-- 中间布局顶部 地图-->
        <div class="center-layout-top layout">
          <!-- <ImagePreview :src="mapImg" width="100%" height="100%" /> -->
          <HomeCenter />
        </div>
        <!-- 中间布局中间 营业部包区业务统计-->
        <div class="center-layout-center layout">
          <Title title="营业部包区业务统计" />
          <!-- 查询日期选择器 -->
          <el-date-picker
            @change="changeDate2"
            class="date-picker"
            v-model="dateRange"
            type="daterange"
            align="right"
            unlink-panels
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :picker-options="pickerOptions"
            value-format="yyyy-MM-dd"
          >
          </el-date-picker>
          <div class="center-layout-center-chart-title">
            <div class="center-layout-center-chart-title-item">
              <span class="circle"></span>张苏滩营业部
            </div>
            <div class="center-layout-center-chart-title-item">
              <span class="circle"></span>红星营业部
            </div>
          </div>

          <div class="center-layout-center-chart">
            <BarChart
              :class-name="'center-layout-center-chart'"
              :width="'100%'"
              :height="'100%'"
              :chartData="barChartData"
              :autoResize="true"
              :refresh_interVal="3000"
            />
          </div>
        </div>
        <!-- 中间布局底部 小区住户信息统计-->
        <div class="center-layout-bottom layout">
          <Title title="小区住户信息统计" />
          <div class="filtr-selects filter-selects-bottom">
            <el-select
              class="bottom-selects"
              v-model="communityResidents.salesDepartment"
              placeholder="营业部"
            >
              <el-option
                v-for="(item, index) in salesDepartmentList"
                :key="index"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
            <el-select
              class="bottom-selects"
              v-model="communityResidents.baoQu"
              placeholder="包区"
            >
              <el-option
                v-for="(item, index) in baoQuList"
                :key="index"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
            <el-select
              class="bottom-selects"
              v-model="communityResidents.community"
              placeholder="小区"
            >
              <el-option
                v-for="(item, index) in communityList"
                :key="index"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
            <el-select
              class="bottom-selects"
              v-model="communityResidents.time"
              placeholder="时间"
            >
              <el-option
                v-for="(item, index) in timeList"
                :key="index"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </div>
          <el-table :data="tableCommunityData" height="78%" style="width: 100%">
            <el-table-column prop="ly" label="楼宇" width="120" align="center">
            </el-table-column>
            <el-table-column prop="dy" label="单元" width="180" align="center">
            </el-table-column>
            <el-table-column
              prop="fjh"
              label="房间号"
              width="150"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="lxr"
              label="联系人"
              width="150"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="lxdh"
              label="联系电话"
              width="120"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="yys"
              label="运营商"
              width="auto"
              align="center"
            >
            </el-table-column>
          </el-table>
        </div>
      </div>
      <!-- 右侧布局 小区业务数据统计排名-->
      <div class="right-layout layout">
        <div class="right-layout-top">
          <Title title="小区业务数据统计排名" />
          <div class="filtr-selects filter-selects-righttop">
            <el-select
              class="righttop-selects"
              v-model="communityBusiness.salesDepartment"
              placeholder="营业部"
              @change="handleCommunityBusinessChange"
            >
              <el-option
                v-for="(item, index) in salesDepartmentList"
                :key="index"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
            <el-select
              class="righttop-selects"
              v-model="communityBusiness.baoQu"
              placeholder="包区"
              @change="handleCommunityBusinessBaoquChange"
            >
              <el-option
                v-for="(item, index) in baoQuListR"
                :key="index"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
            <!-- <el-select class="righttop-selects" v-model="marketingBusiness.community" placeholder="小区">
              <el-option v-for="item in communityList" :label="item.label" :value="item.value"></el-option>
            </el-select> -->
            <el-select
              class="righttop-selects"
              v-model="communityBusiness.time"
              placeholder="时间"
              @change="handleCommunityTime"
            >
              <el-option
                v-for="(item, index) in timeList"
                :key="index"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </div>
          <el-table
            :data="tableData"
            height="90%"
            style="width: 100%"
            ref="tableRef"
          >
            <el-table-column prop="rank" label="排名" width="50" align="center">
              <template slot-scope="scope">
                <div :class="getRanking(scope.row.rank)">
                  {{ scope.row.rank }}
                </div>
              </template>
            </el-table-column>
            <el-table-column
              prop="community"
              label="小区名称"
              width="auto"
              align="center"
              show-overflow-tooltip
            ></el-table-column>
            <el-table-column
              prop="accomplish"
              label="任务完成度"
              width="90"
              align="center"
            ></el-table-column>
            <el-table-column
              prop="isOk"
              label="是否达标"
              width="90"
              align="center"
            >
              <template slot-scope="scope">
                <div v-if="scope.row.isOk == '是'">
                  <div class="isOk-yes">
                    {{ scope.row.isOk }}
                    <img src="@/assets/images/home/flag_red.png" alt="是" />
                  </div>
                </div>
                <div v-else>
                  <div class="isOk-no">
                    {{ scope.row.isOk }}
                    <img src="@/assets/images/home/flag_gray.png" alt="否" />
                  </div>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="right-layout-center">
          <el-slider
            v-model="value"
            :format-tooltip="formatTooltip"
            disabled
          ></el-slider>
          <Title title="业务渗透率统计" />
        </div>
        <!-- 千兆、宽带渗透率 -->
        <div class="right-layout-bottom">
          <PieChart
            :class-name="'right-layout-bottom-chart'"
            :width="'100%'"
            :height="'100%'"
            :chartData="pieChartData"
            :autoResize="true"
            :refresh_interVal="3000"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Title from "./components/Title";
import PanelGroup from "./dashboard/PanelGroup";
import LineChart from "./dashboard/LineChart";
import RaddarChart from "./dashboard/RaddarChart";
import PieChart from "./dashboard/PieChart";
import BarChart from "./dashboard/BarChart";
import HomeTask from "./components/HomeTask";
import BarSvg from "./components/BarSvg";
import ImagePreview from "@/components/ImagePreview";
import HomeCenter from "./components/HomeCenter";
let baseUrl =
  location.protocol +
  "//" +
  location.hostname +
  (location.port ? ":" + location.port : "");
export default {
  name: "Index",
  components: {
    Title,
    PanelGroup,
    LineChart,
    RaddarChart,
    PieChart,
    BarChart,
    HomeTask,
    BarSvg,
    ImagePreview,
    HomeCenter,
  },
  data() {
    return {
      barChartData: {
        xAxisData: [
          "万达包区",
          "南河新村包区",
          "日杂市场包区",
          "安居包区",
          "航天和美包区",
          "天庆嘉园包区",
          "广电中心包区",
          "均家滩包区",
          "尚东嘉园包区",
          "康乐花园包区",
        ],
        yAxisData: [50, 50, 50, 50, 50, 50, 50, 50, 50, 50],
      },
      pieChartData: {
        legendData: ["千兆渗透率", "宽带渗透率"],
        seriesData: [
          { value: 34, name: "千兆渗透率", label: "" },
          { value: 66, name: "宽带渗透率", label: "" },
        ],
      },
      mapImg: baseUrl + require("@/assets/images/home/map.png"),
      dateRange: [],
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      //营销业务统计筛选条件
      marketingBusiness: {
        salesDepartment: "",
        baoQu: "",
        community: "",
        time: "",
      },
      //小区住户信息统计筛选条件
      communityResidents: {
        salesDepartment: "",
        baoQu: "",
        community: "",
        time: "",
      },
      //小区业务数据统计筛选条件
      communityBusiness: {
        salesDepartment: "",
        baoQu: "",
        community: "",
        time: "",
      },
      marketingBusinessBaoquTotalList: [
        [
          {
            title: "移动",
            num: 22,
            color: "#FF9502",
          },
          {
            title: "宽带",
            num: 32,
            color: "#00bb7a",
          },
          {
            title: "全量融合",
            num: 23,
            color: "#007AFF",
          },
          {
            title: "高值融合",
            num: 17,
            color: "#E83535",
          },
          {
            title: "FTTR",
            num: 34,
            color: "#05AEE6",
          },
          {
            title: "视联网AI",
            num: 22,
            color: "#7728F5",
          },
        ],
        [
          {
            title: "移动",
            num: 36,
            color: "#FF9502",
          },
          {
            title: "宽带",
            num: 16,
            color: "#00bb7a",
          },
          {
            title: "全量融合",
            num: 14,
            color: "#007AFF",
          },
          {
            title: "高值融合",
            num: 12,
            color: "#E83535",
          },
          {
            title: "FTTR",
            num: 26,
            color: "#05AEE6",
          },
          {
            title: "视联网AI",
            num: 2,
            color: "#7728F5",
          },
        ],
        [
          {
            title: "移动",
            num: 21,
            color: "#FF9502",
          },
          {
            title: "宽带",
            num: 31,
            color: "#00bb7a",
          },
          {
            title: "全量融合",
            num: 14,
            color: "#007AFF",
          },
          {
            title: "高值融合",
            num: 12,
            color: "#E83535",
          },
          {
            title: "FTTR",
            num: 15,
            color: "#05AEE6",
          },
          {
            title: "视联网AI",
            num: 1,
            color: "#7728F5",
          },
        ],

        [
          {
            title: "移动",
            num: 22,
            color: "#FF9502",
          },
          {
            title: "宽带",
            num: 31,
            color: "#00bb7a",
          },
          {
            title: "全量融合",
            num: 15,
            color: "#007AFF",
          },
          {
            title: "高值融合",
            num: 13,
            color: "#E83535",
          },
          {
            title: "FTTR",
            num: 16,
            color: "#05AEE6",
          },
          {
            title: "视联网AI",
            num: 1,
            color: "#7728F5",
          },
        ],
        [
          {
            title: "移动",
            num: 35,
            color: "#FF9502",
          },
          {
            title: "宽带",
            num: 18,
            color: "#00bb7a",
          },
          {
            title: "全量融合",
            num: 14,
            color: "#007AFF",
          },
          {
            title: "高值融合",
            num: 10,
            color: "#E83535",
          },
          {
            title: "FTTR",
            num: 26,
            color: "#05AEE6",
          },
          {
            title: "视联网AI",
            num: 2,
            color: "#7728F5",
          },
        ],
        [
          {
            title: "移动",
            num: 28,
            color: "#FF9502",
          },
          {
            title: "宽带",
            num: 9,
            color: "#00bb7a",
          },
          {
            title: "全量融合",
            num: 5,
            color: "#007AFF",
          },
          {
            title: "高值融合",
            num: 3,
            color: "#E83535",
          },
          {
            title: "FTTR",
            num: 15,
            color: "#05AEE6",
          },
          {
            title: "视联网AI",
            num: 0,
            color: "#7728F5",
          },
        ],
        [
          {
            title: "移动",
            num: 28,
            color: "#FF9502",
          },
          {
            title: "宽带",
            num: 8,
            color: "#00bb7a",
          },
          {
            title: "全量融合",
            num: 16,
            color: "#007AFF",
          },
          {
            title: "高值融合",
            num: 13,
            color: "#E83535",
          },
          {
            title: "FTTR",
            num: 44,
            color: "#05AEE6",
          },
          {
            title: "视联网AI",
            num: 91,
            color: "#7728F5",
          },
        ],
      ],
      //营销业务统计列表总表
      marketingBusinessTotalList: [
        [
          {
            title: "移动",
            num: 170,
            color: "#FF9502",
          },
          {
            title: "宽带",
            num: 114,
            color: "#00bb7a",
          },
          {
            title: "全量融合",
            num: 86,
            color: "#007AFF",
          },
          {
            title: "高值融合",
            num: 67,
            color: "#E83535",
          },
          {
            title: "FTTR",
            num: 160,
            color: "#05AEE6",
          },
          {
            title: "视联网AI",
            num: 118,
            color: "#7728F5",
          },
        ],
        [
          {
            title: "移动",
            num: 79,
            color: "#FF9502",
          },
          {
            title: "宽带",
            num: 79,
            color: "#00bb7a",
          },
          {
            title: "全量融合",
            num: 51,
            color: "#007AFF",
          },
          {
            title: "高值融合",
            num: 41,
            color: "#E83535",
          },
          {
            title: "FTTR",
            num: 75,
            color: "#05AEE6",
          },
          {
            title: "视联网AI",
            num: 25,
            color: "#7728F5",
          },
        ],
        [
          {
            title: "移动",
            num: 91,
            color: "#FF9502",
          },
          {
            title: "宽带",
            num: 35,
            color: "#00bb7a",
          },
          {
            title: "全量融合",
            num: 35,
            color: "#007AFF",
          },
          {
            title: "高值融合",
            num: 26,
            color: "#E83535",
          },
          {
            title: "FTTR",
            num: 85,
            color: "#05AEE6",
          },
          {
            title: "视联网AI",
            num: 93,
            color: "#7728F5",
          },
        ],
      ],

      //营销业务统计列表
      marketingBusinessList: [
        {
          title: "移动",
          num: 170,
          color: "#FF9502",
        },
        {
          title: "宽带",
          num: 114,
          color: "#00bb7a",
        },
        {
          title: "全量融合",
          num: 86,
          color: "#007AFF",
        },
        {
          title: "高值融合",
          num: 67,
          color: "#E83535",
        },
        {
          title: "FTTR",
          num: 160,
          color: "#05AEE6",
        },
        {
          title: "视联网AI",
          num: 118,
          color: "#7728F5",
        },
      ],

      value: 40,
      tableCommunityData: [
        {
          ly: "1号楼",
          dy: "1单元",
          fjh: "101",
          lxr: "张鹏",
          lxdh: "17797648718",
          yys: "中国",
        },
        {
          ly: "1号楼",
          dy: "1单元",
          fjh: "102",
          lxr: "李铁",
          lxdh: "13919030601",
          yys: "中国移动",
        },
        {
          ly: "1号楼",
          dy: "1单元",
          fjh: "103",
          lxr: "易康",
          lxdh: "18919185845",
          yys: "中国",
        },
      ],
      //小区业务数据统计包区排名总表
      tableDataBaoquTotal: [
        [
          {
            rank: "1",
            community: "城关区天庆嘉园B区",
            accomplish: "113.33%",
            isOk: "是",
          },
          {
            rank: "2",
            community: "国泰嘉园",
            accomplish: "96.67%",
            isOk: "否",
          },
          {
            rank: "3",
            community: "省广电总台专家公寓",
            accomplish: "13.33%",
            isOk: "否",
          },
          {
            rank: "4",
            community: "雁栖园",
            accomplish: "0%",
            isOk: "否",
          },
        ],

        [
          {
            rank: "1",
            community: "红叶城",
            accomplish: "0%",
            isOk: "否",
          },
          {
            rank: "2",
            community: "康乐花园",
            accomplish: "0%",
            isOk: "否",
          },
          {
            rank: "3",
            community: "红星紫郡",
            accomplish: "0%",
            isOk: "否",
          },
        ],
        [
          {
            rank: "1",
            community: "城关区天庆嘉园A区",
            accomplish: "0%",
            isOk: "否",
          },
          {
            rank: "2",
            community: "城关区天庆嘉园C区",
            accomplish: "0%",
            isOk: "否",
          },
        ],
        [
          {
            rank: "1",
            community: "安居小区南区",
            accomplish: "0%",
            isOk: "否",
          },
        ],
        [
          {
            rank: "1",
            community: "金雁花园",
            accomplish: "58.00%",
            isOk: "否",
          },
          {
            rank: "2",
            community: "城关区政府家属院",
            accomplish: "0%",
            isOk: "否",
          },
          {
            rank: "3",
            community: "广电家园",
            accomplish: "0%",
            isOk: "否",
          },
        ],
        [
          {
            rank: "1",
            community: "南昌路经济适用房",
            accomplish: "72.00%",
            isOk: "否",
          },
          {
            rank: "2",
            community: "南昌路科苑一区家属楼",
            accomplish: "44.00%",
            isOk: "否",
          },
          {
            rank: "3",
            community: "省人民医院家属院",
            accomplish: "0%",
            isOk: "否",
          },
        ],
        [
          {
            rank: "1",
            community: "兰宁小区",
            accomplish: "92.00%",
            isOk: "否",
          },
          {
            rank: "2",
            community: "地震局东岗西路家属院",
            accomplish: "56.00%",
            isOk: "否",
          },
          {
            rank: "3",
            community: "南河新村",
            accomplish: "0%",
            isOk: "否",
          },
        ],
      ],

      //小区业务数据统计排名总表
      tableDataTotal: [
        [
          {
            rank: "1",
            community: "城关区天庆嘉园B区",
            accomplish: "113.33%",
            isOk: "是",
          },
          {
            rank: "2",
            community: "国泰嘉园",
            accomplish: "96.67%",
            isOk: "否",
          },
          {
            rank: "3",
            community: "兰宁小区",
            accomplish: "92.00%",
            isOk: "否",
          },
          {
            rank: "4",
            community: "南昌路经济适用房",
            accomplish: "72.00%",
            isOk: "否",
          },
          {
            rank: "5",
            community: "金雁花园",
            accomplish: "58.00%",
            isOk: "否",
          },
          {
            rank: "6",
            community: "地震局东岗西路家属院",
            accomplish: "56.00%",
            isOk: "否",
          },
          {
            rank: "7",
            community: "南昌路科苑一区家属楼",
            accomplish: "44.00%",
            isOk: "否",
          },
          {
            rank: "8",
            community: "省广电总台专家公寓",
            accomplish: "13.33%",
            isOk: "否",
          },
          {
            rank: "9",
            community: "城关区天庆嘉园A区",
            accomplish: "0%",
            isOk: "否",
          },
          {
            rank: "10",
            community: "城关区天庆嘉园C区",
            accomplish: "0%",
            isOk: "否",
          },
          {
            rank: "11",
            community: "雁栖园",
            accomplish: "0%",
            isOk: "否",
          },
          {
            rank: "12",
            community: "红叶城",
            accomplish: "0%",
            isOk: "否",
          },
          {
            rank: "13",
            community: "康乐花园",
            accomplish: "0%",
            isOk: "否",
          },
          {
            rank: "14",
            community: "红星紫郡",
            accomplish: "0%",
            isOk: "否",
          },
          {
            rank: "15",
            community: "安居小区南区",
            accomplish: "0%",
            isOk: "否",
          },
          {
            rank: "16",
            community: "城关区政府家属院",
            accomplish: "0%",
            isOk: "否",
          },
          {
            rank: "17",
            community: "广电家园",
            accomplish: "0%",
            isOk: "否",
          },
          {
            rank: "18",
            community: "南河新省人民医院家属院村",
            accomplish: "0%",
            isOk: "否",
          },
          {
            rank: "19",
            community: "南河新村",
            accomplish: "0%",
            isOk: "否",
          },
        ],

        [
          {
            rank: "1",
            community: "城关区天庆嘉园B区",
            accomplish: "113.33%",
            isOk: "是",
          },
          {
            rank: "2",
            community: "国泰嘉园",
            accomplish: "96.67%",
            isOk: "否",
          },
          {
            rank: "3",
            community: "省广电总台专家公寓",
            accomplish: "13.33%",
            isOk: "否",
          },

          {
            rank: "4",
            community: "城关区天庆嘉园A区",
            accomplish: "0%",
            isOk: "否",
          },
          {
            rank: "5",
            community: "城关区天庆嘉园C区",
            accomplish: "0%",
            isOk: "否",
          },
          {
            rank: "6",
            community: "雁栖园",
            accomplish: "0%",
            isOk: "否",
          },
          {
            rank: "7",
            community: "红叶城",
            accomplish: "0%",
            isOk: "否",
          },
          {
            rank: "8",
            community: "康乐花园",
            accomplish: "0%",
            isOk: "否",
          },
          {
            rank: "9",
            community: "红星紫郡",
            accomplish: "0%",
            isOk: "否",
          },
        ],

        [
          {
            rank: "1",
            community: "兰宁小区",
            accomplish: "92.00%",
            isOk: "否",
          },
          {
            rank: "2",
            community: "南昌路经济适用房",
            accomplish: "72.00%",
            isOk: "否",
          },
          {
            rank: "3",
            community: "金雁花园",
            accomplish: "58.00%",
            isOk: "否",
          },
          {
            rank: "4",
            community: "地震局东岗西路家属院",
            accomplish: "56.00%",
            isOk: "否",
          },
          {
            rank: "5",
            community: "南昌路科苑一区家属楼",
            accomplish: "44.00%",
            isOk: "否",
          },
          {
            rank: "6",
            community: "安居小区南区",
            accomplish: "0%",
            isOk: "否",
          },
          {
            rank: "7",
            community: "城关区政府家属院",
            accomplish: "0%",
            isOk: "否",
          },
          {
            rank: "8",
            community: "广电家园",
            accomplish: "0%",
            isOk: "否",
          },
          {
            rank: "9",
            community: "南河新省人民医院家属院村",
            accomplish: "0%",
            isOk: "否",
          },
          {
            rank: "10",
            community: "南河新村",
            accomplish: "0%",
            isOk: "否",
          },
        ],
      ],

      //小区业务数据统计排名
      tableData: [
        {
          rank: "1",
          community: "城关区天庆嘉园B区",
          accomplish: "113.33%",
          isOk: "是",
        },
        {
          rank: "2",
          community: "国泰嘉园",
          accomplish: "96.67%",
          isOk: "否",
        },
        {
          rank: "3",
          community: "兰宁小区",
          accomplish: "92.00%",
          isOk: "否",
        },
        {
          rank: "4",
          community: "南昌路经济适用房",
          accomplish: "72.00%",
          isOk: "否",
        },
        {
          rank: "5",
          community: "金雁花园",
          accomplish: "58.00%",
          isOk: "否",
        },
        {
          rank: "6",
          community: "地震局东岗西路家属院",
          accomplish: "56.00%",
          isOk: "否",
        },
        {
          rank: "7",
          community: "南昌路科苑一区家属楼",
          accomplish: "44.00%",
          isOk: "否",
        },
        {
          rank: "8",
          community: "省广电总台专家公寓",
          accomplish: "13.33%",
          isOk: "否",
        },
        {
          rank: "9",
          community: "城关区天庆嘉园A区",
          accomplish: "0%",
          isOk: "否",
        },
        {
          rank: "10",
          community: "城关区天庆嘉园C区",
          accomplish: "0%",
          isOk: "否",
        },
        {
          rank: "11",
          community: "雁栖园",
          accomplish: "0%",
          isOk: "否",
        },
        {
          rank: "12",
          community: "红叶城",
          accomplish: "0%",
          isOk: "否",
        },
        {
          rank: "13",
          community: "康乐花园",
          accomplish: "0%",
          isOk: "否",
        },
        {
          rank: "14",
          community: "红星紫郡",
          accomplish: "0%",
          isOk: "否",
        },
        {
          rank: "15",
          community: "安居小区南区",
          accomplish: "0%",
          isOk: "否",
        },
        {
          rank: "16",
          community: "城关区政府家属院",
          accomplish: "0%",
          isOk: "否",
        },
        {
          rank: "17",
          community: "广电家园",
          accomplish: "0%",
          isOk: "否",
        },
        {
          rank: "18",
          community: "南河新省人民医院家属院村",
          accomplish: "0%",
          isOk: "否",
        },
        {
          rank: "19",
          community: "南河新村",
          accomplish: "0%",
          isOk: "否",
        },
      ],

      //营业部列表
      salesDepartmentList: [
        {
          value: 0,
          label: "营业部总量",
        },
        {
          value: 1,
          label: "红星营业部",
        },
        {
          value: 2,
          label: "张苏滩营业部",
        },
      ],
      //包区列表
      baoQuList: [
        {
          value: 1,
          label: "包区1",
        },
        {
          value: 2,
          label: "包区2",
        },
        {
          value: 3,
          label: "包区3",
        },
        {
          value: 4,
          label: "包区4",
        },
        {
          value: 5,
          label: "包区5",
        },
        {
          value: 6,
          label: "包区6",
        },
      ],
      //小区列表
      communityList: [
        {
          value: 1,
          label: "小区1",
        },
        {
          value: 2,
          label: "小区2",
        },
        {
          value: 3,
          label: "小区3",
        },
        {
          value: 4,
          label: "小区4",
        },
        {
          value: 5,
          label: "小区5",
        },
        {
          value: 6,
          label: "小区6",
        },
      ],
      //时间区域列表
      timeList: [
        {
          value: "week",
          label: "最近一周",
        },
        {
          value: "month",
          label: "最近一个月",
        },
        {
          value: "quarter",
          label: "最近一个季度",
        },
        {
          value: "year",
          label: "最近一年",
        },
      ],
    };
  },
  mounted() {
    //this.autoScroll();
  },
  methods: {
    changeDate2(val) {
      console.log("changeDate2");
      console.log(val);
      this.dateRange = val;
      //查询营业部包区业务统计数据
      this.barChartData = {
        xAxisData: [
          "万达包区",
          "南河新村包区",
          "日杂市场包区",
          "安居包区",
          "航天和美包区",
          "天庆嘉园包区",
          "广电中心包区",
          "均家滩包区",
          "尚东嘉园包区",
          "康乐花园包区",
        ],
        yAxisData: [10, 20, 30, 40, 50, 60, 70, 80, 90, 100],
      };
    },
    autoScroll() {
      setInterval(() => {
        this.$refs.tableRef.bodyWrapper.scrollTop =
          this.$refs.tableRef.bodyWrapper.scrollHeight;
      }, 3000); // 每3秒滚动一次
    },
    formatTooltip(val) {
      return val + "%";
    },
    getRanking(rank) {
      if (rank == "1") {
        return "first";
      } else if (rank == "2") {
        return "second";
      } else if (rank == "3") {
        return "third";
      } else {
        return "other";
      }
    },
    //时间切换
    handleMarketingTime(){
      this.$message('数据完善中...');
    },
    //营销业务统计包区选中方法
    handlebaoqu() {
      this.marketingBusinessList =
        this.marketingBusinessBaoquTotalList[this.marketingBusiness.baoQu];
    },
    //营销业务统计营业部选中方法
    handleMarketingBusinessChange(value) {
      this.baoQuListL = [];
      this.marketingBusiness.baoQu = "";
      this.marketingBusinessList =
        this.marketingBusinessTotalList[this.marketingBusiness.salesDepartment];
      console.log(value, "@@@@@@@@@@@@@@@");
      switch (value) {
        case 0:
          this.baoQuListL = [];
          break;
        case 1:
          this.baoQuListL = [
            {
              value: 0,
              label: "二枢纽综合网格",
            },
            {
              value: 1,
              label: "红星综合网格",
            },
            {
              value: 2,
              label: "安居综合网格1",
            },
          ];
          break;
        case 2:
          this.baoQuListL = [
            {
              value: 3,
              label: "安居综合网格2",
            },
            {
              value: 4,
              label: "滩尖子综合网格",
            },
            {
              value: 5,
              label: "渭源路东综合网格",
            },
            {
              value: 6,
              label: "渭源路西综合网格",
            },
          ];
          break;
      }
    },
    //时间切换
    handleCommunityTime(){
      this.$message('数据完善中...');
    },
    //包区数据选中
    handleCommunityBusinessBaoquChange() {
      this.tableData = this.tableDataBaoquTotal[this.communityBusiness.baoQu];
    },
    //小区业务数据统计排名
    handleCommunityBusinessChange(value) {
      this.baoQuListR = [];
      this.communityBusiness.baoQu = "";
      this.tableData =
        this.tableDataTotal[this.communityBusiness.salesDepartment];
      switch (value) {
        case 0:
          this.baoQuListR = [];
          break;
        case 1:
          this.baoQuListR = [
            {
              value: 0,
              label: "二枢纽综合网格",
            },
            {
              value: 1,
              label: "红星综合网格",
            },
            {
              value: 2,
              label: "安居综合网格1",
            },
          ];
          break;
        case 2:
          this.baoQuListR = [
            {
              value: 3,
              label: "安居综合网格2",
            },
            {
              value: 4,
              label: "滩尖子综合网格",
            },
            {
              value: 5,
              label: "渭源路东综合网格",
            },
            {
              value: 6,
              label: "渭源路西综合网格",
            },
          ];
          break;
      }
    },
  },
};
</script>

<style scoped lang="scss">
.app-container {
  padding: 10px;
}

.home {
  width: 100%;
  height: calc(90vh);
  background: rgba(243, 242, 239, 1);
  display: flex;
  justify-content: space-between;
  flex-direction: column;

  .layout {
    width: 100%;
    background: #fff;
    // border: 1px solid #ccc;
    box-sizing: border-box;
    border-radius: 4px;
    padding: 10px 18px;
    box-sizing: border-box;
  }

  .top-layout {
    width: 100%;
    height: 14%;
    //margin-bottom: 16px;
  }

  .main-layout {
    width: 100%;
    height: 85%;
    /* // flex-grow: 1; */
    display: flex;
    justify-content: space-between;
    flex-direction: row;

    .filtr-selects {
      display: flex;
    }

    .left-layout {
      width: 19%;

      .bar-svg {
        height: calc(100% - 75px);
        display: flex;
        flex-direction: column;
        justify-content: space-around;

        .bar-svg-item {
          margin-top: 8px;
          border-bottom: 2px solid rgba(0, 0, 0, 0.4);

          .bar-svg-item-title {
            font-size: 18px;
            color: #aeaeb2;
          }

          .bar-svg-item-num {
            display: flex;
            font-size: 28px;
            line-height: 35px;
            color: #000;
            font-weight: 600;
          }
        }
      }
    }

    .center-layout {
      width: 54%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;

      .center-layout-top {
        padding: 0;
        height: 46%;

        .map-img {
          width: 100%;
          height: 100%;
        }
      }

      .center-layout-center {
        height: 25%;
        position: relative;

        .date-picker {
          position: absolute;
          top: 10px;
          right: 10px;
          z-index: 10;
        }

        .center-layout-center-chart-title {
          width: 100%;
          position: absolute;
          top: 15%;
          // right: 5%;
          display: flex;
          justify-content: center;

          .center-layout-center-chart-title-item {
            display: flex;
            align-items: center;
            margin-left: 10px;
            color: rgb(70, 70, 70);
            font-size: 14px;
            font-family: SourceHanSansSC-regular;

            .circle {
              width: 5px;
              height: 5px;
              border-radius: 50%;
              background-color: #00bb7a;
              margin-right: 5px;
            }
          }

          .center-layout-center-chart-title-item:first-child {
            .circle {
              background-color: #ff9502;
            }
          }
        }

        .center-layout-center-chart {
          height: 78%;
        }
      }

      .center-layout-bottom {
        position: relative;
        height: 26%;

        .filter-selects-bottom {
          position: absolute;
          top: 6px;
          right: 6px;
          width: 36%;

          .bottom-selects {
            width: 25%;
          }
        }
      }
    }

    .right-layout {
      width: 25%;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;

      .right-layout-top {
        position: relative;
        height: 54%;

        .filter-selects-righttop {
          position: absolute;
          top: -2px;
          right: -5px;
          width: 56%;

          .bottom-selects {
            width: 33%;
          }
        }

        .first {
          color: #fff;
          background-color: #fd4f4f;
          /* 红色背景 */
        }

        .second {
          color: #fff;
          background-color: #fcca00;
          /* 黄色背景 */
        }

        .third {
          color: #fff;
          background-color: #a2ef4d;
          /* 绿色背景 */
        }

        .other {
          color: #fff;
          background-color: #cecece;
          /* 灰色背景 */
        }

        .isOk-yes {
          display: flex;
          align-items: center;
          justify-content: center;

          img {
            width: 16px;
            height: 16px;
            margin-left: 5px;
          }
        }

        .isOk-no {
          display: flex;
          align-items: center;
          justify-content: center;

          img {
            width: 16px;
            height: 16px;
            margin-left: 5px;
          }
        }
      }

      .right-layout-center {
        height: 10%;
      }

      .right-layout-bottom {
        height: 35%;
      }
    }
  }
}

::v-deep .el-slider__runway.disabled .el-slider__bar {
  background-color: #3e7af6 !important;
  cursor: default !important;
}

::v-deep .el-slider__runway.disabled .el-slider__button {
  border-color: #3e7af6 !important;
  cursor: pointer !important;
}

::v-deep .el-slider__runway.disabled .el-slider__button-wrapper:hover,
.el-slider__runway.disabled .el-slider__button-wrapper.hover {
  cursor: default !important;
}

::v-deep .el-select .el-input .el-select__caret {
  width: 12px;
}

::v-deep .el-input--suffix .el-input__inner {
  padding-right: 15px;
}

::v-deep .el-date-editor--daterange.el-input__inner {
  width: 226px;
}

::v-deep .el-image__inner.el-image__preview {
  object-fit: inherit !important;
}
</style>
